<template>
  <div id="wc_state" style="width:100%;height:340px;"></div>
</template>

<script>
require('echarts/extension/bmap/bmap'); //  百度地图扩展插件，用于显示Echarts中的地图
export default {
  // props: {
  //   wcList: Array,  //  城市名称
  //   wcMessage: Object  //  城市坐标
  // },
  mounted () {
    let data = [
      {name: '海门', value: 9},
      {name: '鄂尔多斯', value: 12},
      {name: '招远', value: 12},
      {name: '齐齐哈尔', value: 14},
      {name: '盐城', value: 15},
      {name: '赤峰', value: 16},
      {name: '青岛', value: 18},
      {name: '乳山', value: 18},
      {name: '金昌', value: 19},
      {name: '泉州', value: 21},
      {name: '南通', value: 23},
      {name: '拉萨', value: 24},
      {name: '云浮', value: 24},
      {name: '上海', value: 25},
      {name: '攀枝花', value: 25},
      {name: '承德', value: 25},
      {name: '汕尾', value: 26},
      {name: '丹东', value: 27},
      {name: '瓦房店', value: 30},
      {name: '延安', value: 38},
      {name: '咸阳', value: 43},
      {name: '南昌', value: 54},
      {name: '柳州', value: 54},
      {name: '三亚', value: 54},
      {name: '泸州', value: 57},
      {name: '克拉玛依', value: 72}
    ];
    let geoCoordMap = {
      '海门': [121.15, 31.89],
      '鄂尔多斯': [109.781327, 39.608266],
      '招远': [120.38, 37.35],
      '安阳': [114.35, 36.1],
      '开封': [114.35, 34.79],
      '济南': [117, 36.65],
      '兰州': [103.73, 36.03],
      '沧州': [116.83, 38.33],
      '临沂': [118.35, 35.05],
      '南充': [106.110698, 30.837793],
      '天津': [117.2, 39.13],
      '富阳': [119.95, 30.07],
      '克拉玛依': [84.77, 45.59],
      '柳州': [109.4, 24.33],
      '三亚': [109.511909, 18.252847],
      '泰安': [117.13, 36.18],
      '诸暨': [120.23, 29.71],
      '郑州': [113.65, 34.76],
      '哈尔滨': [126.63, 45.75],
      '聊城': [115.97, 36.45],
      '芜湖': [118.38, 31.33],
      '唐山': [118.02, 39.63],
      '平顶山': [113.29, 33.75],
      '邢台': [114.48, 37.05],
      '德州': [116.29, 37.45],
      '济宁': [116.59, 35.38],
      '荆州': [112.239741, 30.335165],
      '菏泽': [115.480656, 35.23375],
      '合肥': [117.27, 31.86],
      '武汉': [114.31, 30.52],
      '大庆': [125.03, 46.58]};
    setTimeout(() => {
      function randomValue () {
        return Math.round(Math.random() * 1000);
      }
      // let geoCoordMap = this.wcMessage;  //  获取城市坐标
      let convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        console.log(res);
        return res;
      };
      let myChart = echarts.init(document.getElementById("wc_state"), 'dark');  //  初始化
      window.addEventListener('resize', function () { //  动态改变Canvas宽高
        myChart.resize();
      });
        //  公测状态
      myChart.setOption({
        visualMap: {
          min: 0,
          max: 1500,
          left: 'left',
          top: 'bottom',
          text: ['High', 'Low'],
          seriesIndex: [1],
          inRange: {
            color: ['#e0ffff', '#006edd']
          },
          calculable: true
        },
        title: {
          // text: '公厕状态统计',
          // subtext: '紫色为在线状态',
          left: 'center'
        },
        tooltip: {
          // trigger: 'item'
        },
        geo: {
          map: 'china',
          // center: [104.114129, 37.550339],
          zoom: 1.6,
          roam: true,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            // name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 20,
            symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
            symbolRotate: 35,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#F06C00'
              }
            }
          },
          {
            name: 'categoryA',
            type: 'map',
            geoIndex: 0,
            data: [
              {name: '天津', value: randomValue()},
              {name: '上海', value: randomValue()},
              {name: '重庆', value: randomValue()},
              {name: '河北', value: randomValue()},
              {name: '河南', value: randomValue()},
              {name: '云南', value: randomValue()},
              {name: '辽宁', value: randomValue()},
              {name: '黑龙江', value: randomValue()},
              {name: '湖南', value: randomValue()},
              {name: '安徽', value: randomValue()},
              {name: '山东', value: randomValue()},
              {name: '新疆', value: randomValue()},
              {name: '江苏', value: randomValue()},
              {name: '浙江', value: randomValue()},
              {name: '江西', value: randomValue()},
              {name: '湖北', value: randomValue()},
              {name: '广西', value: randomValue()},
              {name: '甘肃', value: randomValue()},
              {name: '山西', value: randomValue()},
              {name: '内蒙古', value: randomValue()},
              {name: '陕西', value: randomValue()},
              {name: '吉林', value: randomValue()},
              {name: '福建', value: randomValue()},
              {name: '贵州', value: randomValue()},
              {name: '广东', value: randomValue()},
              {name: '青海', value: randomValue()},
              {name: '西藏', value: randomValue()},
              {name: '四川', value: randomValue()},
              {name: '宁夏', value: randomValue()},
              {name: '海南', value: randomValue()},
              {name: '台湾', value: randomValue()},
              {name: '香港', value: randomValue()},
              {name: '澳门', value: randomValue()}
            ]
          }
        ]
      });
    });
    // this.wcState();  //  公厕状态
  },
  methods: {
    //  公厕状态
    wcState () {
      //  获取Canvas并插入数据
      // let myChart = echarts.init(document.getElementById("wc_state"));
      // myChart.setOption(this.wc_state_obj);
    }
  }
};
</script>

